<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar :title="title"></dawnBar>
		<view class="page-container" style="padding-bottom: 140rpx;">
			<!-- <pBox @search="getPage()" :search="true"></pBox> -->
			<view class="order--wrap">
				<!-- 标签内容 -->
				<view class="list tn-margin-top-sm">
					<view class="list-item" v-for="(item,index) in list" :key="index">
						<view class="list-badge">
							<!-- <tn-tag class="dawn-tag-sm">{{f.MC || '' }}</tn-tag> -->
							<!-- <tn-badge v-if="f.MC && f.MC!=='null'" backgroundColor="tn-main-gradient-dawn" 
								fontColor="tn-color-white" :radius="80">{{ f.MC }}</tn-badge> -->
						</view>
						<checkbox-group>
							<view
								class="list-head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
								<view class="tn-flex tn-flex-col-center">
									<!-- <checkbox @click="checkSelectItem($event, item)" :value="item.DJH"
										:checked="item.checked" v-if="item.YZMC !== '挂号费'" /> -->
									<text class="tn-color-black">单据号：</text>
									<text class="tn-color-dawn dawn-text-md tn-text-bold">{{ item.DJH  || '' }}</text>
									<!-- <text @click="copyData(item.registerNo)"
									class="tn-icon-copy-fill tn-margin-left-xs tn-color-dawn"></text> -->
								</view>
								<view>
									<view class="justify-content-item ">
										<tn-tag v-if="item.ZFZT === '0'" backgroundColor="tn-main-gradient-dawn"
											fontColor="#FFFFFF" shape="circleLeft" width="auto">
											{{ item.YZLX }}
										</tn-tag>
									</view>
								</view>
							</view>
							<view class="list-content tn-flex tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view class="tn-flex tn-flex-nowrap  tn-flex-col-center tn-flex-row-left">
									<view v-if="item.pictures && item.pictures.length > 0">
										<image mode="aspectFill" class="list-content-image" :src="item.pictures[0]" />
									</view>
									<view class="">
										<view v-if="item.YZMC && item.YZMC!=='null'" class="tn-margin-bottom-sm">
											<text class="tn-color-black"></text>
											<text
												class="tn-color-black dawn-text-md tn-text-bold">{{item.YZMC || '' }}</text>
										</view>
										<view>
											<text class="tn-color-black">挂号单：</text>
											<text class="tn-text-bold">{{item.registerNo || '' }}</text>
											<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
											<!-- <text class="tn-color-black">单据类型：</text>
										<text class="tn-text-bold">{{ item.DJLX  || '' }}</text> -->
											<text class="tn-color-black">金额：</text>
											<text class="dawn-color-red tn-text-bold dawn-text-md">
												¥ {{ item.JE  || '' }}</text>
										</view>
										<!-- <view class="tn-margin-top-xs">
											<tn-tag v-if="item.BZMC && item.BZMC!=='null'"
												backgroundColor="tn-main-gradient-money" fontColor="#FFFFFF"
												shape="circleRight" width="auto">
												<text style="font-size: 10px;">{{ item.BZMC }}</text>
											</tn-tag>
											<tn-tag v-else backgroundColor="tn-main-gradient-cyan-dawn"
												fontColor="#FFFFFF" shape="circleRight" width="auto">
												<text style="font-size: 10px;">普通门诊</text>
											</tn-tag>
										</view> -->
										<!-- <view>
										<text class="tn-color-black">金额：</text>
										<text class="tn-color-dawn tn-text-bold">{{ item.JE  || '' }}</text>
									</view> -->
									</view>
								</view>
								<!-- <view 
								class="tn-flex tn-flex-nowrap  tn-flex-col-center tn-flex-row-left">
								<view>
									
								</view>
							</view> -->
							</view>

							<view class="dawn-line"></view>
							<view
								class=" tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view class="justify-content-item tn-text-df">
									<text class="tn-icon-time-fill tn-color-dawn tn-margin-right-ss"></text>
									<text class="tn-color-black">{{ formatDateTime(item.KDSJ)  || '' }}</text>
								</view>
								<view
									class="tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right op-box">
									<text class="tn-color-black">医嘱：</text>
									<text class="tn-text-bold">{{item.YZID || '' }}</text>
								</view>
							</view>
						</checkbox-group>

					</view>
					<!-- 悬浮按钮-->
					<view class="tn-flex tn-footerfixed" v-if="list.length > 0">
						<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							<tn-button @click="showDetail = true"
								class="tn-shadow-blur dawn-btn-lg dawn-btn-lg__primary" style="width: 85% !important;">
								<text class="tn-icon-order-fill tn-padding-right-xs"></text>
								<text>详 情</text>
							</tn-button>
						</view>
						<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							<tn-button @click="createOrderCheck()" class="tn-shadow-blur dawn-btn-lg dawn-btn-lg__pay"
								style="width: 85% !important;">
								<text class="tn-icon-money tn-padding-right-xs"></text>
								<text>缴 费</text>
								<text class="tn-margin-left-ss">{{ createOrderData.totalCost }}</text>
							</tn-button>
						</view>
					</view>

				</view>
			</view>
			<view v-if="show">
				<dawnMsg :box="dawnMsgBox" :msg="msg"></dawnMsg>
			</view>
		</view>


		<tn-popup v-model="showDetail" mode="bottom" length="60%" :borderRadius="borderRadius">
			<view class="content">
				<view class="dawn-head dawn-head__fixed tn-padding-top-sm">
					<view>
						<text class="dawn-head__icon tn-icon-order-fill"></text>
						<text class="dawn-head__title">单据明细</text>
					</view>
					<view class="dawn-head__right">
						<tn-button @click=" showDetail = false" class="dawn-btn-sm dawn-btn-sm__defult">
							<text class="tn-icon-close-fill">关闭</text>
						</tn-button>
					</view>
				</view>
				<!-- <scroll-view scroll-y="true"> -->
				<view class="tn-padding-sm" style="padding-top: 60px;padding-bottom: 20px">
					<block v-for="(f,index) in orderData.fmList" :key="index">
						<view class="list-item tn-main-gradient-indigo--dark"
							style="margin-top: 10rpx;margin-bottom: 30rpx;">
							<view class="list-badge">
								<!-- <tn-tag class="dawn-tag-sm">{{f.MC || '' }}</tn-tag> -->
								<!-- <tn-badge v-if="f.MC && f.MC!=='null'" backgroundColor="tn-main-gradient-dawn" 
									fontColor="tn-color-white" :radius="80">{{ f.MC }}</tn-badge> -->
								<tn-tag v-if="f.MC && f.MC!=='null'" backgroundColor="#5F7E8B" fontColor="#FFFFFF"
									shape="circleRight" width="auto">
									{{ f.MC }}
								</tn-tag>
							</view>
							<view
								class="list-head tn-margin-top-xs tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
								<view>
									<text class="tn-color-dawn dawn-text-md tn-text-bold">¥ {{ f.JE  || '' }}</text>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<text class="tn-color-dawn dawn-text-md tn-text-bold">{{ f.YZID  || '' }}</text>
								</view>
								<view class="justify-content-item ">
									<tn-tag v-if="f.YZMC && f.YZMC!=='null'" backgroundColor="#743F23"
										fontColor="#FFFFFF" shape="circleLeft" width="auto">
										{{ f.YZMC }}
									</tn-tag>
								</view>
							</view>
							<!-- <view
									class="list-head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
									<view>
										<view class="justify-content-item ">
											<tn-tag class="dawn-tag-sm">{{f.YZMC || '' }}</tn-tag>
										</view>
									</view>
								</view> -->
							<block v-for="(m,index1) in f.MXLIST" :key="index1">
								<view v-for="(item,index2) in m.MX" :key="index2" class="tn-margin-top-sm">
									<view class="tn-bg-dawn-light tn-padding-sm dawn-radius">
										<view class="tn-flex tn-flex-direction-row tn-flex-col-center">
											<tn-badge backgroundColor="tn-main-gradient-dawn" :radius="35"
												fontColor="tn-color-white">{{ index2+1 }}</tn-badge>
											<text
												class="dawn-text-md tn-text-bold tn-margin-left-ss">{{item.MC || '' }}</text>
										</view>
										<view v-if="item.GG && item.GG!=='null'" class="tn-margin-top-ss">
											<text class="tn-color-black">规格：</text>
											<text class="tn-color-dawn tn-text-bold">{{ item.GG  || '' }}</text>
										</view>
										<view class="tn-margin-top-ss">
											<text class="tn-color-black">单价：</text>
											<text class="tn-text-bold tn-color-dawn">{{item.DJ || '' }}</text>
											<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
											<text class="tn-color-black">单位：</text>
											<text class="tn-text-bold tn-color-dawn">{{ item.DW  || '' }}</text>
											<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
											<text class="tn-color-black">数量：</text>
											<text class="tn-color-dawn tn-text-bold">{{ item.SL  || '' }}</text>
										</view>
									</view>
									<view class="dawn-line"></view>
								</view>
							</block>
						</view>
					</block>
				</view>
				<!-- </scroll-view> -->
			</view>
		</tn-popup>

		<tn-popup v-model="showDiseaseBox" mode="center" width="90%" :borderRadius="borderRadius">
			<view class="content">
				<tn-list-cell>
					<view class="tn-text-center">
						<text class="dawn-text-lg dawn-color">温馨提示</text>
					</view>
				</tn-list-cell>
				<view class="tn-padding dawn-text-md">
					<view class="tn-margin-top tn-text-center">
						<text class="">如需使用</text>
						<text class="dawn-color-dark dawn-text-lg">医保移动支付</text>
					</view>
					<view class="tn-margin-top tn-margin-bottom tn-text-center">
						<text class="">请选择</text>
						<text class="dawn-text-lg dawn-color-red">普通门诊</text>
						<text class="dawn-text-lg">或</text>
						<text class="dawn-text-lg dawn-color-red">一个病种类型</text>
						<text class="dawn-text-lg">的单据</text>
					</view>
				</view>
				<view class="tn-width-full tn-padding-bottom">
					<view class="dawn-line"></view>
					<view class="tn-flex tn-flex-col-center tn-width-full tn-padding-top-sm">
						<view class="tn-flex-1 tn-text-center">
							<tn-button @click="showDiseaseBox = false" class="dawn-btn-lg dawn-btn-lg__success"
								style="width: 85% !important;">
								<text class="tn-icon-left-fill tn-padding-right-xs"></text>
								<text>重新选择</text>
							</tn-button>
						</view>
						<view class="tn-flex-1 tn-text-center">
							<tn-button @click="createOrder()" class="tn-shadow-blur dawn-btn-lg dawn-btn-lg__info"
								style="width: 85% !important;">
								<text class="tn-icon-success-square-fill tn-padding-right-xs"></text>
								<text>缴费</text>
								<text class="tn-margin-left-ss">¥ {{ createOrderData.totalCost }}</text>
							</tn-button>
						</view>
					</view>
				</view>
			</view>
		</tn-popup>

		<!-- 分页 -->
		<!-- <dawn-pagination ref="pagination" :current="queryData.pageNo" :total="total" @pagination="getPage" /> -->

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as OutpatientApi from "@/api/hospital/outpatient.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				loading: false,
				show: false,
				borderRadius: 40,
				showDetail: false,
				showDiseaseBox: false,
				msg: '',
				dawnMsgBox: '',
				tabsIndex: 0,
				title: '门诊缴费-单据信息',
				queryData: {
					pageSize: 10,
					pageNo: 1,
					patientId: '',
					patientName: '',
					registerNo: '',
					dataText: ''
				},
				status: -1,
				orderData: {},
				list: [],
				isChsPay: 'ok',
				createOrderData: {
					userId: 0,
					pid: 0,
					patientId: '',
					patientName: '',
					registerNo: '',
					receiptNoStr: '',
					cardNo: '',
					totalCost: 0,
					payScene: ''
				}
			}
		},
		onLoad(options) {
			if (!this.isLogin) {
				toLogin();
				return;
			} else {
				let obj = this.$util.getStorageData(config.STORE_KEY.ORDER_REG_NO);
				if (obj.payScene) {
					this.title = '处方签-单据信息';
					this.queryData = obj;
				} else {
					this.queryData.registerNo = obj.registerNo;
					this.queryData.patientId = this.patientInfo.patientId;
					this.queryData.patientName = this.patientInfo.name;
					this.queryData.cardNo = this.patientInfo.cardNo;
					this.queryData.clinicNo = this.patientInfo.clinicNo;
				}
				this.queryData.userId = this.userInfo.openid;
				this.queryData.openid = this.userInfo.openid;
				this.queryData.pid = this.patientInfo.id || 0;
				this.getPage();
			}
		},
		methods: {
			search(result) {
				if (result.code === 0) {
					this.queryData = result.data;
					this.queryData.pageNo = 1;
					this.queryData.pageSize = this.$refs.pagination.pageSize;
					this.getPage();
				}
			},
			checkSelectItem(e, item) {
				let that = this;
				// 如果是取消选中，就把checked置为false,如果是选中，就给添加一个checked=true
				if (item.checked == true) {
					this.$set(item, 'checked', false)
				} else {
					this.$set(item, 'checked', true)
				}
				console.table(this.list);
				let totalCost = 0.00;
				this.list.forEach(function(item) {
					if (item.checked) {
						totalCost = that.$util.$h.Add(totalCost, item.JE);
					}
				});
				this.createOrderData.totalCost = totalCost;
			},
			getPage: function(page) {
				let that = this;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = '';
				this.$set(this, 'list', []);
				OutpatientApi.getUnpayList(this.queryData).then(res => {
					this.loading = false;
					console.table(res);
					if (res.code === 0) {
						that.orderData = res.data;
						const l = res.data.djList || [];
						let totalCost = 0.00;
						let receiptNoStr = '';
						l.forEach(function(item) {
							totalCost = that.$util.$h.Add(totalCost, item.JE);
							receiptNoStr += item.DJH + ',';
							item.checked = true;
							// if (!item.BZBM && item.YZMC !== '挂号费') {
							// 	item.BZBM = "DAWNPTMZ"
							// }
							if (!item.BZBM) {
								item.BZBM = "DAWNPTMZ"
							}
						});
						this.createOrderData.totalCost = totalCost;
						that.createOrderData.receiptNoStr = receiptNoStr;

						this.$set(this, 'list', l);
						if (l.length === 0) {
							this.show = true;
							this.msg = '未查找到缴费单据';
						}
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			createOrderCheck() {
				this.show = false;
				this.msg = '';
				this.loading = false;
				this.dawnMsgBox = 'popup';
				this.showDiseaseBox = false;
				let that = this;
				let receiptNoStr = '';
				let bzSet = new Set();
				this.list.forEach(function(item) {
					if (item.checked) {
						receiptNoStr += item.DJH + ',';
						if (item.BZBM) {
							bzSet.add(item.BZBM);
						}
					}
				});

				if (receiptNoStr === '') {
					return this.$util.Tips({
						title: '请选择缴费单据'
					});
				}
				
				console.info(bzSet.size);

				if (bzSet.size > 1) {
					that.isChsPay = 'no';
					that.showDiseaseBox = true;
					return;
				} else {
					that.isChsPay = 'ok';
				}
				this.createOrder();

			},
			createOrder: function(data) {
				this.show = false;
				this.msg = '';
				this.loading = false;
				this.dawnMsgBox = 'popup';
				this.showDiseaseBox = false;
				let that = this;
				let receiptNoStr = '';
				this.list.forEach(function(item) {
					if (item.checked) {
						receiptNoStr += item.DJH + ',';
					}
				});

				if (receiptNoStr === '') {
					return this.$util.Tips({
						title: '请选择缴费单据'
					});
				}

				this.createOrderData.receiptNoStr = receiptNoStr;

				this.loading = true;
				this.show = false;

				this.createOrderData.payScene = this.queryData.payScene;
				this.createOrderData.pid = this.queryData.pid;
				this.createOrderData.userId = this.queryData.openid;
				this.createOrderData.openid = this.queryData.openid;
				this.createOrderData.patientId = this.queryData.patientId;
				this.createOrderData.clinicNo = this.queryData.clinicNo;
				this.createOrderData.patientName = this.queryData.patientName;
				this.createOrderData.cardNo = this.queryData.cardNo;
				this.createOrderData.registerNo = this.queryData.registerNo;
				OutpatientApi.createOrder(this.createOrderData).then(res => {
					console.table(res);
					this.loading = false;
					if (res.code === 0) {
						// uni.navigateTo({
						// 	url: '/hosp/order/info?orderNumber=' + res.data.orderNumber
						// })
						that.toPayUI(res.data.orderNumber, that.isChsPay);
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>